<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- svg canvas 矢量图（放大不会失真 autocad） 像素图（放大会失真）  -->
    <!-- 刮刮乐 echarts本质也是canvas  -->
    <!-- echarts本质就是把canvas封装成一个js库 -->
    <!-- 画框和实际画的大小 -->
    <canvas id="canvas" style="border:1px solid blue;" width="800" height="600"></canvas>
    <script>
        // canvas 画布 
        var cvs = document.getElementById("canvas");

        // // 获取上下文环境

        var con = cvs.getContext("2d");

        // // 新建一条路径

        con.beginPath();

        // // 设置线的颜色

        con.strokeStyle = "pink";

        // // 设置线宽

        con.lineWidth = 5;

        // // 从哪里开始画

        con.moveTo(0, 0);

        // // 线到哪里去，X,Y

        con.lineTo(100, 100);

        con.lineTo(0, 100);

        // // 填充颜色

        con.fillStyle = "red";

        // // 填充

        con.fill();

        // // 闭合路径

        con.closePath();

        // // 通过线条来绘制图形轮廓。

        con.stroke();

        // // ------------------矩形函数---------------------------//

        con.beginPath();

        // // 画一个填充矩形

        con.fillRect(200, 0, 100, 100);

        // 清除画图指定区域

        con.clearRect(210, 10, 80, 80);

        con.beginPath();

        // 画一个边框矩形

        con.strokeRect(350, 0, 100, 100);

        // 清除画图指定区域 让清除部分完全透明 如果是有边框的需要加上边框的值

        con.clearRect(345, -5, 110, 110);
    </script>
</body>

</html>